<template>
	
	<view>
		<loading
			ref="loading"
			:custom="false"
			:type="1">
		</loading>
		<view class="fixed">
			
			<!-- 状态栏 -->
			<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
			<view class="myheader padding-sm  flex justify-between">
				<view class="font-sub-title">
					<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
					健康报告（{{date}}）
				</view>
				<picker mode="date" :value="date" @change="bindDateChange">
					<text class="font-sub-title cuIcon-calendar"></text>
				</picker>
			</view>
		</view>
		<view class="cu-list menu sm-border" :style="{marginTop:navHeight}">
			<view class="cu-avatar xl round margin-left" style="background-color: white;" :style="{backgroundImage:'url('+avatar+')'}"></view>
			<view class="cu-item bg-white">
				<view class="text-light-gray inline"><text class=" margin-right font-normal">姓名</text></view>
				<view class="content">
					<text class=" margin-right font-normal">{{userInfo.name||userInfo.NAME}}</text>
					<text class="font-normal">{{userInfo.sex||userInfo.SEX==1?'男':'女'}}</text>
				</view>
			</view>
			<view class="cu-item bg-white">
				<view class="text-light-gray inline"><text class=" margin-right font-normal">生日</text></view>
				<view class="content">
					<text class=" margin-right font-normal">{{userInfo.birthday||userInfo.BIRTHDAY}}</text>
				</view>
			</view>
			<view class="cu-item bg-white">
				<view class="text-light-gray inline"><text class=" margin-right font-normal">身份证</text></view>
				<view class="content">
					<text class=" margin-right font-normal">{{userInfo.idcard||userInfo.ID_CARD}}</text>
				</view>
			</view>
			<view class="cu-item bg-white" @click="call(userInfo.phone||userInfo.PHONE)">
				<view class="text-light-gray inline"><text class=" margin-right font-normal">手机</text></view>
				<view class="content flex text-blue">
					<text class=" margin-right font-normal">{{userInfo.phone||userInfo.PHONE}}</text>
					<view class="cuIcon cuIcon-dianhua"></view>
				</view>
			</view>
			<view class="cu-item bg-white">
				<view class="content">
					<text class="text-blue margin-right font-normal">血压</text>
				</view>
				<view class="action" v-if="sbp">
					<text class=" margin-right font-normal">平均血压：{{sbpAvg}}/{{dbpAvg}}mmHg</text>
				</view>
			</view>
			<bloodchart v-show="sbp" key="blood" :categories="allCategories" :series="bloodSeries"></bloodchart>
			<view v-show="sbp==''" class="no_data">
				<image src="/static/img/no_data.png" class="no_data_img" mode="widthFix"></image>
				<view class="font-sub-title">暂无数据</view>
			</view>
			<view class="cu-item bg-white">
				<view class="content">
					<text class="text-blue margin-right font-normal">心率</text>
				</view>
				<view class="action" v-if="heart">
					<text class=" margin-right font-normal">平均心率：{{heart}}次/分</text>
				</view>
			</view>
			<heartchart v-show="heart" key="heart" :categories="heartCategories" :series="heartSeries"></heartchart>
			<view v-show="heart==''" class="no_data">
				<image src="/static/img/no_data.png" class="no_data_img" mode="widthFix"></image>
				<view class="font-sub-title">暂无数据</view>
			</view>
			<view class="cu-item bg-white">
				<view class="content">
					<text class="text-blue margin-right font-normal">血氧</text>
				</view>
				<view class="action" v-if="bloodoxygenAvg">
					<text class=" margin-right font-normal">平均血氧：{{bloodoxygenAvg}}%</text>
				</view>
			</view>
			<bloodoxygenchart v-show="bloodoxygenAvg" key="bloodoxgen" :categories="allCategories" :series="bloodoxgenSeries"></bloodoxygenchart>
			<view v-show="bloodoxygenAvg==''" class="no_data">
				<image src="/static/img/no_data.png" class="no_data_img" mode="widthFix"></image>
				<view class="font-sub-title">暂无数据</view>
			</view>
			<view class="cu-item bg-white">
				<view class="content">
					<text class="text-blue margin-right font-normal">呼吸率</text>
				</view>
				<view class="action" v-if="repiratoryAvg">
					<text class=" margin-right font-normal">平均呼吸率：{{repiratoryAvg}}次/分</text>
				</view>
			</view>
			<repiratorychart v-show="repiratoryAvg"  key="repiratory" :categories="allCategories" :series="repiratorySeries"></repiratorychart>
			<view v-show="repiratoryAvg==''" class="no_data">
				<image src="/static/img/no_data.png" class="no_data_img" mode="widthFix"></image>
				<view class="font-sub-title">暂无数据</view>
			</view>
			<view class="cu-item bg-white">
				<view class="content">
					<text class="text-blue margin-right font-normal">体温</text>
				</view>
				<view class="action" v-if="tempAvg">
					<text class="margin-right font-normal">平均体温：{{tempAvg}}°C</text>
				</view>
			</view>
			<temperaturechart v-show="tempAvg" key="temperature" :categories="allCategories" :series="tempSeries"></temperaturechart>
			<view v-show="tempAvg==''" class="no_data">
				<image src="/static/img/no_data.png" class="no_data_img" mode="widthFix"></image>
				<view class="font-sub-title">暂无数据</view>
			</view>
			<view class="cu-item bg-white">
				<view class="content">
					<text class="text-blue margin-right font-normal">运动</text>
				</view>
				<view class="action" v-if="stepTotal">
					<text class=" margin-right font-normal">总步数：{{stepTotal}}步</text>
				</view>
			</view>
			<exercisechart v-show="stepTotal" key="exercise" :categories="stepCategories" :series="stepSeries"></exercisechart>
			<view v-show="stepTotal==''" class="no_data">
				<image src="/static/img/no_data.png" class="no_data_img" mode="widthFix"></image>
				<view class="font-sub-title">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import bloodchart from '@/pages/health/bloodchart/index.vue'
	import heartchart from '@/pages/health/heartchart/index.vue'
	import temperaturechart from '@/pages/health/temperaturechart/index.vue'
	import exercisechart from '@/pages/health/exercisechart/index.vue'
	import bloodoxygenchart from '@/pages/health/bloodoxygenchart/index.vue'
	import repiratorychart from '@/pages/health/repiratorychart/index.vue'
	import {formatDateDay} from '@/utils/datetime.js'
	import {getStatistic} from '@/utils/standard.js'
	import _config from '@/config/index.js'
	import Vue from 'vue'
	import {
		mapGetters
	} from 'vuex'
	var that;
	export default {
		computed:{
			...mapGetters(['navHeight']),
		},
		components: {
			bloodchart,
			heartchart,
			temperaturechart,
			exercisechart,
			bloodoxygenchart,
			repiratorychart
		},
		data() {
			return {
				userInfo:'',
				statusBarHeight:Vue.prototype.StatusBar,
				allCategories:[],
				bloodSeries:[],
				heartCategories:[],
				heartSeries:[],
				stepCategories:[],
				stepSeries:[],
				tempSeries:[],
				bloodoxgenSeries:[],
				repiratorySeries:[],
				tempAvg:'',
				stepTotal:'',
				heart:'',
				bloodoxygenAvg:'',
				repiratoryAvg:'',
				sbp:'',
				dbp:'',
				userId:'',
				avatar:_config.NGINX_SERVER + 'imgs/avatar/avatar.jpg',
				date:formatDateDay(new Date())
			}
		},
		onLoad(e) {
			that = this;
			if(e.data!=undefined){
				var info = JSON.parse(e.data)
				this.userInfo =info
				this.userId = this.userInfo.patientId
				if(info.avatar!=''){
					this.avatar = info.avatar
				}
			}else{
				this.userInfo = uni.getStorageSync("userInfo")
				if(this.userInfo.AVATAR!=''){
					this.avatar = this.userInfo.AVATAR
				}
			}
			
			this.getData();
		},
		onShow(){
		},
		mounted() {
			this.open();
		},
		methods: {
			reset(){
				this.allCategories = []
				this.bloodSeries = []
				this.heartCategories = []
				this.heartSeries = []
				this.stepCategories = []
				this.stepSeries = []
				this.tempSeries = []
				this.bloodoxgenSeries = []
				this.repiratorySeries = []
				this.tempAvg = ''
				this.stepTotal = ''
				this.heart = ''
				this.bloodoxygenAvg = ''
				this.repiratoryAvg = ''
				this.sbp = ''
				this.dbp = ''
			},
			getData(){
				this.reset();
				this.$http.getAll(
				{
					startTime:that.date,
					endTime:that.date,
					"sort":"2",
					userId:that.userId
				}).then((res) => {
					var data = res.content
					that.bloodSeries=[{
							"name":"收缩压",
							"data":[]
						},
						{
							"name":"舒张压",
							"data":[]
						}
					]
					that.tempSeries=[
						{
							"name":"体温",
							"data":[]
						}
					]
					that.bloodoxgenSeries=[
						{
							"name":"血氧",
							"data":[]
						}
					]
					that.repiratorySeries=[
						{
							"name":"呼吸率",
							"data":[]
						}
					]
					var sbpArr=[],dbpArr=[],tmpArr=[],bloodoxygenArr=[],repiratoryArr=[]
					if (data.length!=0) {
						
						for(var i=0;i<data.length;i++){
							that.allCategories.push(data[i].terminalTime.substring(11,19))
							
							that.bloodSeries[0].data.push(data[i].sbpvalue);
							that.bloodSeries[1].data.push(data[i].dbpvalue);
							
							that.tempSeries[0].data.push(data[i].temperature);
							
							that.bloodoxgenSeries[0].data.push(data[i].oovalue);
				
							that.repiratorySeries[0].data.push(data[i].respiratoryRateValue);
							
							sbpArr.push(data[i].sbpvalue)
							dbpArr.push(data[i].dbpvalue)
							tmpArr.push(data[i].temperature)
							bloodoxygenArr.push(data[i].oovalue)
							repiratoryArr.push(data[i].respiratoryRateValue)
						}
						that.sbp = that.bloodSeries[0].data[0]
						that.dbp = that.bloodSeries[1].data[0]
						that.tempAvg =  getStatistic(tmpArr)[2];
						that.sbpAvg = getStatistic(sbpArr)[2]
						that.dbpAvg = getStatistic(dbpArr)[2]
						
						that.bloodoxygenAvg = getStatistic(bloodoxygenArr)[2]
						that.repiratoryAvg = getStatistic(repiratoryArr)[2]
					}
				})
				
				this.$http.getBLStep(
				{
					'startTime':that.date,
					'endTime':that.date,
					'sort':"2",
					userId:that.userId
				}).then((res) => {
					var data = res.content
					if(res.content.length!=0){
						this.$http.getAllByDay({
							'userId':that.userId,
							'startTime':that.date,
							'endTime':that.date
						}).then(result=>{
							that.stepTotal = result.stepValue
						})
					}
					that.stepSeries=[
						{
							"name":"步数",
							"data":[]
						}
					]
					for(var i=0;i<data.length;i++){
						that.stepCategories.push(data[i].startTime.substring(11,16))
						that.stepSeries[0].data.push(data[i].sportStep)
					}
				})
				
				this.$http.getHeart(
				{
					startTime:that.date,
					endTime:that.date,
					"sort":"2",
					userId:that.userId
				}).then((res) => {
					var data = res.content
					that.heartSeries=[
						{
							"name":"心率",
							"data":[]
						}
					]
					if (data.length!=0) {
						for(var i=0;i<data.length;i++){
							that.heartCategories.push(data[i].terminalTime.substring(11,19))
							that.heartSeries[0].data.push(data[i].heartValue);
						}
						that.heart = that.heartSeries[0].data[0]
					}
				})
				
				setTimeout(function(){
					that.close();
				},3000)
			},
			bindDateChange: function(e) {
				that.open();
				this.date = e.target.value
				this.getData()
			},
			back(){
				uni.navigateBack();
			},
			close:function(){
				this.$refs.loading.close();
			},
			open:function(){
				this.$refs.loading.open();
			},
			call(tel){
				uni.makePhoneCall({
					phoneNumber:tel
				})
			}
		}
	}
</script>

<style scoped>
.cu-avatar {
	position: absolute;
	z-index: 222;
	right: 24rpx;
	top: 40rpx;
}
.cu-list{
	position: relative;
}
.cu-item{
	height: 108rpx;
}
.text-light-gray{
	width: 130rpx;
}
.inline{
	display: inline-block;
}
	.no_data_img{
		margin-top: 50rpx;
	}
</style>
